<template>
    <div>
        <el-row>
            <el-col :span="24" style="padding: 5px">
                <el-button type="primary" @click="showWin()">新增</el-button>
            </el-col>
        </el-row>

        <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                width="30%"
        >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="商品名称" prop="sname">
                    <el-input v-model="form.sname" suffi-icon="el-icon-user"></el-input>
                </el-form-item>
                <el-form-item label="商品价格" prop="sprice">
                    <el-input v-model="form.sprice" suffi-icon="el-icon-user"></el-input>
                </el-form-item>
                <el-form-item label="商品类型" prop="slei">
                    <el-input v-model="form.slei" suffi-icon="el-icon-user"></el-input>
                </el-form-item>
                <el-form-item label="商品照片">
                    <el-upload
                            class="avatar-uploader el-upload1"
                            action="http://localhost:8080/shop/upload"
                            :show-file-list="false"
                            :on-success="uploadSuccess"
                            :before-upload="beforeUpload"
                            with-credentials
                    >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOrUpdate()">确 定</el-button>
             </span>
        </el-dialog>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="sid"
                    label="商品编号"
                    >
            </el-table-column>
            <el-table-column
                    prop="head"
                    label="商品照片"
            >

            </el-table-column>
            <el-table-column
                    prop="sname"
                    label="商品名称"
                    >
            </el-table-column>
            <el-table-column
                    prop="sprice"
                    label="商品价格"
                    >
            </el-table-column>
            <el-table-column
                    prop="slei"
                    label="商品类型"
                    >
            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作"
                    >
                <template slot-scope="scope">
                    <el-button @click="showWin(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "ShopVue",
        created(){
            this.loadData()
        },
        data() {
            return {
                //总条数
                total:100,
                //当前页
                currentPage:1,
                //每页多少条
                pageSize:10,
                //搜索的关键字
                keyword:"",
                dialogVisible:false,
                title:"新增商品",
                tableData: [],
                imageUrl:"",
                imageSrc: '',
                form:{
                    sname:"",
                    sprice:"",
                    slei:"",
                    head:""
                },
            }
        },
        methods: {
            loadData(){
                this.$http.post("shop/listAll").then(res=>{
                    this.tableData=res.data
                })
            },
            showWin(row){
                if (row){
                    this.form=Object.assign({},row);
                    this.title="修改商品";
                    this.imageUrl="http://localhost:9999/img/head/"+row.head
                }else {
                    this.title="新增商品"
                    this.form={
                        sname:"",
                        sprice:"",
                        slei:"",
                        head:""

                    }
                    this.imageUrl="";
                }
                this.dialogVisible=true;
            },
            saveOrUpdate(){
                this.$http.post("shop/saveOrUpdate",this.form).then(res=>{
                    if (res.data.success){
                        this.loadData();
                        this.dialogVisible=false;
                    }else {
                        this.$message.error(res.data.error);        }
                })
            },
            del(row){
                this.$http.post("shop/delete", {sid:row.sid}).then(res=>{
                    console.info("后台返回的数据",res)
                    this.$message.error("删除"+row.sname);
                    this.loadData()

                })
            },
            //上传图片成功的回调函数
            uploadSuccess(res){
                console.info("上传成功后台返回的数据",res)
                this.imageUrl="http://localhost:9999/img/head/"+res.target;
                this.form.head=res.target
            },
            //上传之前的回调函数
            beforeUpload(file){
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
        }
    }
</script>

<style scoped>

</style>